<template>
  <div class="fold-module">
    <el-collapse v-if="!notExpend" v-model="isOpen">
      <el-collapse-item name="1">
        <div slot="title" class="title-container">
          <div><Title :title="title" /></div>
          <i class="icon el-icon-arrow-down"/>
        </div>
        <slot />
      </el-collapse-item>
    </el-collapse>
    <slot v-else />
  </div>
</template>
<script>
import Title from '@/components/Title';
export default {
  components: { Title },
  props: {
    title: {
      type: String,
      default: ''
    },
    notExpend: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isOpen: '1'
    };
  }
};
</script>
<style lang="scss" scoped>
.title-container {
  font-size: 14px;
  display: flex;
  align-items: center;
  .icon {
    margin-left: 8px;
    transition: transform 0.3s;
  }
}
.fold-module {
  &::v-deep {
    .el-collapse-item  {
      &.is-active {
        .icon {
          transform: rotate(180deg);
        }
      }
    }
    .el-collapse-item__header {
      height: auto;
      padding: 12px 0;
      .el-collapse-item__arrow {
        display: none;
      }
    }
    .el-collapse,.el-collapse-item__wrap,.el-collapse-item__header {
      border: none !important;
    }
    .el-collapse-item__content {
      padding-bottom: 0px;
    }
  }
}

</style>
